
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Taphandle V1.0</title>
<link rel="icon" href="images/tap16.png" type="images/png" />
<link rel="SHORTCUT ICON" href="images/saada.ico" />

<link rel="stylesheet" type="text/css" href="styles/global.css" />
<link rel="stylesheet" type="text/css" href="styles/form.css" />
<link rel="stylesheet" type="text/css" href="styleimport/datatable.css" />
<link rel="stylesheet" type="text/css" href="styles/simplemodal.css" />
<link rel="stylesheet" type="text/css" href="styleimport/jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="styleimport/jquery.alerts.css" />
<link rel="stylesheet" type="text/css" href="styleimport/jquery.tooltip.css" />
<link type="text/css" rel="stylesheet" href="styleimport/layout-default-latest.css" />


<script type="text/javascript" src="jsimport/jquery-1.7.2.js"></script>
<script type="text/javascript" src="jsimport/jquery-ui-latest.js"></script>
<script type="text/javascript" src="jsimport/jquery.ui.widget.js"></script>
<script type="text/javascript" src="jsimport/jquery.layout-latest.js"></script>
<script type="text/javascript" src="jsimport/jquery.ui.widget.js"></script>
<script type="text/javascript" src="jsimport/jquery.ui.mouse.js"></script>
<script type="text/javascript" src="jsimport/jquery.ui.draggable.js"></script>
<script type="text/javascript" src="jsimport/jquery.ui.droppable.js"></script>
<script type="text/javascript" src="jsimport/jquery.ui.sortable.js"></script>
<script type="text/javascript" src="jsimport/jquery.ui.tabs.js"></script>
<script type="text/javascript" src="jsimport/jquery.ui.dialog.js"></script>
<script type="text/javascript" src="jsimport/jquery.jstree.js"></script>
<script type="text/javascript" src="jsimport/jquery.tooltip.js"></script>
<script type="text/javascript" src="jsimport/jquery.dataTables.js"></script>
<script type="text/javascript" src="jsimport/jquery.jsonSuggest-2.js"></script> 
<script type="text/javascript" src="jsimport/jquery.simplemodal.js"></script> 
<script type="text/javascript" src="jsimport/jquery.alerts.js"></script> 
<script type="text/javascript" src="jsimport/jquery.jsonSuggest-2.js"></script> 
<script type="text/javascript" src="jsimport/jquery.jeditable.js"></script> 
<script type="text/javascript" src="jsimport/json2.js"></script>
<script type="text/javascript" src="javascript/websampconnector.js"></script>

<script type="text/javascript" src="javascript/formator.js"></script>
<script type="text/javascript" src="javascript/resultPaneModel.js"></script>
<script type="text/javascript" src="javascript/resultPaneView.js"></script>
<script type="text/javascript" src="javascript/resultPaneControler.js"></script>
<script type="text/javascript" src="javascript/kwconstraintModel.js"></script>
<script type="text/javascript" src="javascript/kwconstraintView.js"></script>
<script type="text/javascript" src="javascript/kwconstraintControler.js"></script>
<script type="text/javascript" src="javascript/tapModel.js"></script>
<script type="text/javascript" src="javascript/tapView.js"></script>
<script type="text/javascript" src="javascript/tapControler.js"></script>
<script type="text/javascript" src="javascript/sampModel.js"></script>
<script type="text/javascript" src="javascript/sampView.js"></script>
<script type="text/javascript" src="javascript/sampControler.js"></script>
<script type="text/javascript" src="javascript/jobModel.js"></script>
<script type="text/javascript" src="javascript/jobView.js"></script>
<script type="text/javascript" src="javascript/jobControler.js"></script>
<script type="text/javascript" src="javascript/jobDictionnary.js"></script>
<script type="text/javascript" src="javascript/cartView.js"></script>
<script type="text/javascript" src="javascript/cartControler.js"></script>
<script type="text/javascript" src="javascript/cartModel.js"></script>
<script type="text/javascript" src="javascript/zipjobModel.js"></script>
<script type="text/javascript" src="javascript/utils.js"></script>
<script type="text/javascript" src="javascript/ready.js"></script>
<script type="text/javascript" src="javascript/resize.js"></script>

</head>

<body>

	<div id=banner class="levelonediv" >
		&nbsp;<a href="http://code.google.com/p/tap-handles/" title="Taphandle project page" target="_blank" class=logo></a> &nbsp;&nbsp;
		<div id=pagetitle style='width: 100%'><span class=pagetitle>TAPHandle</span>
			<input type=text title="Enter a URL or a nickname of a TAP service. A suggestion list appears once one character has been typed"
			id=node_selector class=inputvalue style="font-size: small;font-family: courier; width: 300; position: relative; bottom: 5;" >
			<span class=help>Node Selector</span>
		
			<div id=externaltools style='position: relative;'> 
				<a href="javascript:void(0);" class="formexpender" title="Expand query form" 
				onclick='resultPaneView.fireExpendForm();' id='formexpender'></a>
		
				<a href="javascript:void(0);" id=showquerymeta title='Show Metadata' class=question></a>
				<a href="javascript:void(0);" title='Download the results of the current job in a VOTable'
				class=votable onclick='resultPaneView.fireDownloadVOTable();'></a> 		
				<a href="javascript:void(0);" title='Open the shopping cart'
				class=zip onclick='cartView.fireOpenCart();' id=zipbutton></a> 		
				<a href="javascript:void(0);" title='Connect a SAMP hub. (The SAMP hub must be started first e.g. by starting Aladin)' 
				class=samp id=sampconnector ></a> 
				<a href="javascript:void(0);" title='Send the data selection to SAMP clients' 
				class=ivoa  style='visibility: hidden;'></a>
				<span class=pagetitlepath id=titlepath></span>
			</div>
			
		</div>
	</div>

<div id="accesspane">
	<div id="resultpane" class="pane ui-layout-center">
				<h3 class=help>&nbsp;Welcome to Taphandle</h3>
				<ul>
					<li class=help style="font-size: large;">Select first the TAP services you want to connect with in the <b>Node Selector</b> above.</li>
					<li class=help style="font-size: large;">Yo can either give a URL or a service nickname (the selector will help you).</li>
				</ul>
				<h3 class=help>&nbsp;Then access data by dropping any table node on one active area:</h3>
				<ul>
					<li class=help style="font-size: large;"><b>Here</b> to display the content of the table</li>
					<li class=help style="font-size: large;">On the <b>query area below</b> to setup a query on that table</li>
					<li class=help style="font-size: large;">On the <b>Meta</b> icon to display a description of the columns of the table.</li>
				</ul>
	</div>
	<!-- 
	  SOUTH: query forms
	 -->
	<div id="queryformpane" class="pane ui-layout-south" >
		<!--  
			SUBMIT panel 
		-->
		<div id=formpanemenu style="float: left; text-align: center ;width: 91; border-style: hidden;">
			<div style="text-align: center ;padding: 5px; border-style: hidden;">
				<a href="javascript:void(0);" class=accept id=submitquery title='Execute the query as shown in the "plain text query" tab'></a>
				<hr/>
			</div> 
			<div style="text-align: left ;padding: 5px; text-align: center; border-style: hidden; ">
				<span class=help>Result Limit</span><br/>
				<input type=text id='qlimit' class=numinputvalue  title='Set the max number of returned rows'
	        	style="font-size: small;font-family: Arial, Helvetica, sans-serif;" value='10'/><hr/>  
			</div>
		</div>
		<!--  
			Query form
		-->		
		<div style="background-color: white;height: 260px;width:100%;margin-left:105px">
			<div id="taptab" class=querytab style="border-width:0"">
				<ul style="height: 32px;">
	        		<li><a href="#tapselect" title="Set up the SELECT clause of the query"><span>Select What</span></a></li>
	        		<li><a href="#tapwhere"  title="Set up the WHERE clause of the query"><span>Where</span></a></li>
	        		<li><a href="#taptext"   title="Current query on ADQL text"><span>Plain Text Query</span></a></li>
	        		<li><a href="#tapjob"    title="Acces to the jobs attached to the current session"><span>Job Control</span></a></li>
	    		</ul>
	    		<!-- Columns selection -->
	    		<div id="tapselect" class=queryformtab>
	 				<div style="background-color: white ; width: 380px; height: 220px; vertical-align: middle; float:left;">
	 					<div style="background: white;">
	 						<span class=help>Keywords. Filter:</span>
	 						<input type=text  class=kw_filter style="width: 60px; position: relative; bottom: 5;font-size: small; 
	 						font-family: Arial, Helvetica, sans-serif;" />	 							
	 						<span class=help>Tables:</span>
	 						<select id=tableSelector class=table_filter></select>
	 					</div>
	        			<div id="tapselectmeta" class=kw_list>
	        			</div>      
	        			<div style="background-color: white;">
	        				<span class=help>Drag and Drop keywords to the list of selected fields</span>
	        			</div>
	        		</div>
	        		<div style="background-color: white ;  width: 485px; height: 200px; float: left">
	 					<div style="background-color: white ; width: 480px; height: 125px; float:left;">
	  						<div style="background: white;">
	  							<span class=help>Selected Fields</span>
	  						</div>
	        				<div id="tapselectlist"></div>
	    				</div>
	 					<div style="background-color: white ; width: 480px; height: 60px; float:left;">
	  						<div style="background: white;">
	  							<span class=help>Order By Field</span>
	  						</div>
	        				<div id="taporderby"></div>
	    				</div>
	    			</div>
	    		</div>  
	    		<!-- keywords selection -->
	    		<div id="tapwhere" class=queryformtab >
					<div style="background-color: white ; width: 340px; vertical-align: middle; float:left;">
	 						<div style="background: white;">
	 							<span class=help>Keywords. Filter:</span>
	 							<input type=text  class=kw_filter style="width: 60px; position: relative; bottom: 5;font-size: small; 
	 							font-family: Arial, Helvetica, sans-serif;" />	 							
	 							<span class=help>Tables:</span>
	 							<select id=tableSelector class=table_filter></select>
	 						</div>
	        				<div id="tapmeta" class=kw_list ></div>      
	        				<div style="background-color: white;">
	       						<span class=help>Drag and Drop keywords to the list of constraints</span>
	        				</div>
	        					
	        			</div>
	 				<div style="background-color: white ; width: 680px; float:left; margin-left: 15px;">
	  					<div style="background: white;">
	  						<div style="background: white;float:left;">	  								
	   							<table border=0 style="border-spacing: 0px 0px;"">
									<tr>
	  									<td></td>  
	  									<td><span class=help>Drop Coord. Keywords</span></td>	  															
	  								</tr>
									<tr>
	  									<td><span>alpha</span></td>  
	  									<td><div id="tapalpha" style="float:left;"></div> </td>	  															
	  								</tr>
									<tr>
	  									<td><span>delta</span></td>  
	  									<td><div id="tapdelta" style="float:left;"></div> </td>	  															
	  								</tr>
	    						</table>
	  						</div>
	  						<div style="background: white;float:left;">  							
	  							<table border=0  style="border-spacing: 0px 0px;"">
	  								<tr>
	  									<td></td>	
	  									<td align=right colspan=2><span class=help>Type return or click to valid</span></td>							
	  								</tr>
	  								<tr>
	    								<td align=right><span>Coord</span></td>								
	   									<td><input id=tapcoordval type=text class=coordinputvalue
	   									style="font-size: small;font-family: Arial, Helvetica, sans-serif;"/></td>								
	    								<td><a class=sesame></a>
	    								<a title='Add the current positon to the query' id=acceptpattern class=add href="javascript:void(0);" 
	  									onclick='tapView.fireInputCoordEvent();' 
	  									title="click to add the position to the query"></a></td>							
	  								</tr>
	  								<tr>
	    								<td><span>S/R</span> </td>								
	    								<td colspan=2>
	    								<input  id=tapradiusval value=0.1 type=text class=numinputvalue style="font-family: Arial, Helvetica, sans-serif;font-size: small;"/>
	    								<span class=help>deg</span>
	    								<input type=radio name=tapboxcircle value="Circle" checked /><span> Circle </span>  								
	    								<input type=radio name=tapboxcircle value=Box/><span>Box</span>    
	    								</td>								
	  								</tr>
	  							</table>
	   						</div>
	   						<div style="background: white; float:left; width: 480px;">  							
	  							<span class=help>Constraints</span>
	        					<div id="tapconstraintlist" ></div>
	        					<span class=typomsg></span>	
	        				</div>
	        			</div>
	    			</div>
				</div>
	    		<!--  Query text -->
	    		<div id="taptext" class=queryformtab >	
					<textarea id=adqltext class="querytext"></textarea>
				</div>	
				<!--  job panel -->		
				<div id="tapjob">        
					 <div style="background: white;">
	 					<span class=help>List of UWS jobs</span>
	 					<a title="Remove all jobs" href="javascript:void(0);" class=closekw onclick="resultPaneView.fireRemoveAllJobs();"></a>
	 				</div>
	        		<div id="tapjobs" ></div>      							    	
				</div>	
	    	</div>
		</div>
	</div>
	<!-- 
	     WEST: Data Tree 
	 -->
	<div id="treepane" class="pane ui-layout-west" style="width: 300px">
		<div style="border-style: hidden; vertical-align: middle;">
			<span class=help title='Select TAP nodes with the node selector on the top of the page'>Tap Nodes</span>
		</div>
		<div id="treedisp" style="background-color: white">
		</div>
	</div>
</div>
</body>
</html>